<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre>
        局部组件定义好后只能在定义好的父级中
        局部组件可以使用全局组件，全局组件不能使用局部组件

        注意点：components中   格式=>标签名：组件名（不能加引号）
    </pre>

    <div class="box">
      <model-a></model-a>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      var moban = {
        data: function () {
          return {
            model: 'mmodel',
          }
        },
        template: `
        <div>
            <div>
              {{model}}
            </div>
        </div>
        `,
      }
      new Vue({
        el: '.box',
        data: {},
        methods: {},
        components: {
          'model-a': moban,
        },
      })
    </script>
  </body>
</html>
